<template>
  <div class="role">
    <!-- 搜索框 -->
    <div class="search">
      <el-input placeholder="请输入日志名称" clearable prefix-icon="el-icon-search" v-model="name">
      </el-input>
      <el-select @change="
        pageNum = 1;
   ;
      " clearable v-model="userType" placeholder="请选择操作端">
        <el-option v-for="item in userTypeList" :key="item.userTypeId" :label="item.userTypeName"
          :value="item.userTypeId">
        </el-option>
      </el-select>
      <el-select @change="
        pageNum = 1;
;
      " clearable v-model="exeStatus" placeholder="请选择操作状态">
        <el-option v-for="item in exeStatusList" :key="item.exeStatusId" :label="item.exeStatusName"
          :value="item.exeStatusId">
        </el-option>
      </el-select>
      <!-- 新增时间选择器 -->
      <el-date-picker
          clearable
          @blur="time_blur"
            style="width: 330px;"
            v-model="time"
            @change="change($event)"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    </div>
    <!-- 表格数据 -->
    <div class="table">
      <el-table ref="isExpand" :data="roleData" v-loading="loading" border highlight-current-row height="calc(100%-10rem)"
        stripe style="width: 100%">
        <template slot="empty">
          <el-empty description="暂无数据"></el-empty>
        </template>
        <el-table-column width="200" align="center" prop="opTime" label="操作时间">
        </el-table-column>
        <el-table-column width="200" align="center" prop="name" label="日志名称">
        </el-table-column>
        <el-table-column width="100" align="center" prop="userType" label="操作端">
          <template slot-scope="scope">
            <el-tag type="danger" effect="plain" v-if="scope.row.userType == 1">系统</el-tag>
            <el-tag effect="plain" v-if="scope.row.userType == 2">租户</el-tag>
            <el-tag effect="plain" v-if="scope.row.userType == 3">厂商</el-tag>
            <el-tag effect="plain" v-if="scope.row.userType == 4">房东</el-tag>
            <el-tag effect="plain" v-if="scope.row.userType == 5">房客</el-tag>
            <el-tag effect="plain" v-if="scope.row.userType == 6">房东/房客</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="100" align="center" prop="exeStatus" label="状态">
          <template slot-scope="scope">
            <el-tag type="danger" effect="plain" v-if="scope.row.exeStatus == 0">失败</el-tag>
            <el-tag type="success" effect="plain" v-if="scope.row.exeStatus == 1">成功</el-tag>
          </template>
        </el-table-column>
        <el-table-column width="150" align="center" prop="methodName" label="方法名称">
        </el-table-column>
        <el-table-column width="200" align="center" prop="reqUrl" label="请求地址">
        </el-table-column>
        <el-table-column width="300" align="center" prop="paramJson" label="请求参数">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" :content="scope.row.paramJson">
              <span slot="reference" class="twoLineCls1">{{
                scope.row.paramJson
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" prop="resultJson" label="返回结果">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" :content="scope.row.resultJson">
              <span slot="reference" class="twoLineCls1">{{
                scope.row.resultJson
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="300" align="center" prop="exeMessage" label="具体消息">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" :content="scope.row.exeMessage">
              <span slot="reference" class="twoLineCls1">{{
                scope.row.exeMessage
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" prop="className" label="类名称">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="hover" :content="scope.row.className">
              <span slot="reference" class="twoLineCls1">{{
                scope.row.className
              }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" prop="opIp" label="操作ip">
        </el-table-column>
        <el-table-column width="200" align="center" prop="opAddress" label="操作地址">
        </el-table-column>
        <el-table-column width="200" align="center" prop="opBrowser" label="操作浏览器">
        </el-table-column>
        <el-table-column width="150" align="center" prop="opUser" label="操作人">
        </el-table-column>
        <el-table-column width="200" align="center" prop="opOs" label="操作系统">
        </el-table-column>

      </el-table>
      <el-pagination v-show="roleData.length !== 0" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="pageNum" :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
      
<script>
import {
  getLogsApi
} from "../../../../api/system/log";
export default {
  name: "Troles",
  data() {
    return {
      loading: false,
      searchData: "",
      total: null,
      pageNum: 1,
      pageSize: 5,
      exeStatus: '',
      roleData:[],// 数据项
      startDate:'',// 开始时间
      endDate:'',// 结束时间
      time:'', // 时间选择器绑定的值
      name: '',
      userType: '',
      exeStatusList: [
        {
          exeStatusId: 1,
          exeStatusName: '成功'
        },
        {
          exeStatusId: 0,
          exeStatusName: '失败'
        },
      ],
      userTypeList: [
        {
          userTypeId: 1,
          userTypeName: '系统端'
        },
        {
          userTypeId: 2,
          userTypeName: '租户端'
        },
        {
          userTypeId: 3,
          userTypeName: '厂商端'
        },
        {
          userTypeId: 4,
          userTypeName: '房东端'
        },
        {
          userTypeId: 5,
          userTypeName: '房客端'
        },
        {
          userTypeId: 6,
          userTypeName: '房东/房客端'
        },
      ]
    };
  },
  created() {
    this.pageSize = Number(sessionStorage.getItem("pageSize")) || 5;
    this.pageNum = Number(sessionStorage.getItem("pageNum")) || 1;
    this.initializeDates();  
    this.search()
  },
  destroyed() {
    sessionStorage.removeItem("pageNum");
    sessionStorage.removeItem("pageSize");
  },
  methods: {
    // 时间选择器改变触发的方法
    change(e) {
      console.log("e", e);
      if(e==null) {
        this.initializeDates();  
      }else {
        console.log("this.time", this.time)
          this.startDate = e[0];
          this.endDate = e[1];
          console.log("时间变化了", this.time);
      }
       
        } ,
    
        // 时间选择器失去焦点触发方法
        time_blur() {
console.log('失去交电',this.startDate,this.endDate);

    },
    // 获取时间
    initializeDates() {  
      // 获取当前日期  
      const today = new Date();  

      // 设置开始时间为当月第一天  
      const firstDayOfMonth = new Date(today.getFullYear(), today.getMonth(), 1);  
      this.startDate = this.formatDate(firstDayOfMonth);  

      // 设置结束时间为当天  
      this.endDate = this.formatDate(today);  
    },  
    // 处理时间
    formatDate(date) {  
      // 格式化日期为 yyyy-MM-dd  
      const year = date.getFullYear();  
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始  
      const day = String(date.getDate()).padStart(2, '0');  
      return `${year}-${month}-${day}`;  
    }  ,

    // 分页 pagesize
    handleSizeChange(val) {
      this.pageNum = 1;
      this.getLogs(this.pageNum, val, this.exeStatus, this.name, this.userType,this.startDate,this.endDate);
      sessionStorage.setItem("pageSize", val);
      this.pageSize = val;
      // this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 分页 pagenum
    handleCurrentChange(val) {
      this.getLogs(val, this.pageSize, this.exeStatus, this.name, this.userType,this.startDate,this.endDate);
      sessionStorage.setItem("pageNum", val);
      this.pageNum = val;
      // this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 条件查询
    search() {
      this.pageNum = 1;
      this.getLogs(this.pageNum, this.pageSize, this.exeStatus, this.name, this.userType,this.startDate,this.endDate);
      console.log('时间',this.startDate,this.endDate);
      
      // this.$refs.isExpand.bodyWrapper.scrollTop = 0;
    },
    // 获取角色信息
    getLogs(pageNum, pageSize, exeStatus, name, userType,startDate,endDate) {
      this.loading = true;
      getLogsApi(pageNum, pageSize, exeStatus, name, userType,startDate,endDate).then((res) => {
        this.total = res.data.total;
        if (res.data.rows.length == 0) {
          this.pageNum = this.pageNum - 1;
          if (this.pageNum > 0) {
            this.search();
          } else {
            this.roleData = res.data.rows;
            this.loading = false;
          }
        } else {
          this.loading = false;
          this.roleData = res.data.rows;
        }
      });
    },
    
  },
};
</script>
      
<style lang="scss" >
.role {
  padding-top: 15px;
  padding: 0 15px;
  height: calc(100vh - 100px);

  .search {
    margin-bottom: 15px;

    .el-input {
      width: 200px;
    }

    .el-button {
      width: 100px;
      margin-left: 15px;
    }
  }

  /deep/ .el-dialog__body {
    display: flex;

    .left {
      width: 50%;
    }

    .right {
      width: 50%;
    }
  }

  .table {
    height: 100%;

    .el-table {
      height: 70%;
    }

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }
  }

  .dialog3 {
    .el-dialog {
      .el-dialog__body {
        overflow: auto;
        height: 500px;
      }
    }
  }
}
</style>
<style>
.twoLineCls1 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>